
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { Search, Close } from "@element-plus/icons-vue";
import { usePublicStoreHook } from "@/store/modules/public";
import { useUserStore } from "@/store/modules/user";
import { fetchGetUserList } from '@/api/user'
import { filterCollege, filterGrade, filterMajor } from '@/utils/filter'
import { fetchPutUserInfo } from '@/api/user'

// 表单数据
let tableData = reactive([])
const total = ref<number>(0)// 列表总数
// 实际传递的条件
let listQuery = reactive({
  currentPage: 1,
  name: undefined, // 姓名
  gender: undefined, // 类型
  college: undefined, // 学院
  major: undefined, // 专业
  grade: undefined, // 年级
  pageSize: 10,
  society: useUserStore().userInfo.society
})
// 显示在界面上的查询条件
const showQuery = reactive({
  currentPage: 1,
  name: undefined, // 名称
  gender: undefined, // 类型
  college: undefined, // 学院
  major: undefined, // 专业
  grade: undefined, // 年级
  pageSize: 10,
  society: useUserStore().userInfo.society.split('-')[1]
})
// 查询
const handleSearch = () => {
  getPageList()
}
// 社团类型
let typeOptions = ref([
  {
    id: 0,
    name: '男'
  },
  {
    id: 1,
    name: '女'
  },
])
onMounted(() => {
  getPageList()
})
const tableLoading = ref(false)

// 获取列表
const getPageList = async () => {
  tableLoading.value = true
  listQuery = showQuery
  const res = await fetchGetUserList(listQuery)
  const { currentPage, data } = res.data
  listQuery.currentPage = showQuery.currentPage = currentPage
  total.value = res.data.total
  tableData = data
  tableLoading.value = false
}

const collegeList = ref([{
  id: '',
  name: ''
}])
collegeList.value = usePublicStoreHook().collegeList
const majorList = ref([{
  id: '',
  name: ''
}])
majorList.value = usePublicStoreHook().majorList
const gradeList = ref([{
  id: '',
  name: ''
}])
gradeList.value = usePublicStoreHook().gradeList

const handleRemove = (row: any) => {

  ElMessageBox.confirm(
    '当前操作会将该同学移出社团，是否继续？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      let newSociety = '' || null
      const userSociety = row.society.split('-')
      console.log(useUserStore().userInfo.society)
      const mySociety = useUserStore().userInfo.society.split('-')[1]
      if (userSociety.length == 3) {
        newSociety = null
      } else {
        for (let i = 0; i < userSociety.length; i++) {
          if (userSociety[i] == mySociety) {
            userSociety.splice(i, 1)
          }
        }
        newSociety = userSociety.join('-')
      }
      fetchPutUserInfo({ id: row.id, society: newSociety })
      ElMessage({
        type: 'success',
        message: '操作成功',
      })
      getPageList()
    })
    .catch(() => {
    })
}
</script>


<template>
  <div class="society-content">
    <!-- 查询 -->
    <div class="header flex flex-center">
      <el-input v-model="showQuery.name" placeholder="姓名" clearable />
      <el-select v-model="showQuery.gender" class="m-2" placeholder="性别" clearable>
        <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-select v-model="showQuery.college" class="m-2" placeholder="学院" clearable>
        <el-option v-for="item in collegeList" :key="item.id" :label="item.name" :value="item.id" clearable />
      </el-select>
      <el-select v-model="showQuery.major" class="m-2" placeholder="专业" clearable>
        <el-option v-for="item in majorList" :key="item.id" :label="item.name" :value="item.id" clearable />
      </el-select>
      <el-select v-model="showQuery.grade" class="m-2" placeholder="年级" clearable>
        <el-option v-for="item in gradeList" :key="item.id" :label="item.name" :value="item.id" clearable />
      </el-select>
      <el-button type="primary" @click="handleSearch" :icon="Search" class="btn-green">
        查询
      </el-button>
    </div>

    <!-- 表单 -->
    <el-table :data="tableData" stripe v-loading="tableLoading">
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="stuCode" label="学号" show-overflow-tooltip />
      <el-table-column prop="name" label="姓名" show-overflow-tooltip />
      <el-table-column prop="phone" label="手机号" show-overflow-tooltip />
      <el-table-column prop="gender" label="性别" show-overflow-tooltip>
        <template #default="scope">
          <div>{{ scope.row.gender == 0 ? '男' : '女' }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="college" label="学院">
        <template #default="scope">
          <div>{{ filterCollege(scope.row.college) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="major" label="专业">
        <template #default="scope">
          <div>{{ filterMajor(scope.row.major) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="grade" label="年级">
        <template #default="scope">
          <div>{{ filterGrade(scope.row.grade) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="操作">
        <template #default="scope">
          <el-button class="btn-red" :icon="Close" @click="handleRemove(scope.row)">移出</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :total="total" v-model:page="listQuery.currentPage" v-model:limit="listQuery.pageSize" hide-on-single-page
      @pagination="getPageList" />
  </div>
</template>
<style lang="scss" scoped>
.society-content {
  min-height: 45rem;
  display: grid;
  grid-template-rows: 8rem auto;
  gap: 2rem;

  .header {
    border: 2px solid #eee;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

    .el-input,
    .el-select {
      margin-right: 20px;
      width: 16%;
    }
  }
}
</style>

